<!--is动态切换组件,以及实现按钮和 内容tab切换的DEMO-->

<template>
	<div class="is-demo">
		<!--动态的创建按钮-->
		<div class="buttons">
			<span v-for = "(text, index) in this.buttonData" @click = "changeTab(index)" 
				:class = "clickIndex === index ? 'actived' : 'unActived'" :key = 'index'>
				{{text}}
			</span>			
		</div>
		<div>
			<keep-alive>
				<component :is = "show"></component>
			</keep-alive>
			
		</div>
	</div>
</template>

<script>
	import Tab1 from './isDemo/Tab1'
	import Tab2 from './isDemo/Tab2'
	import Tab3 from './isDemo/Tab3'
	
	export default {
		data(){
			return {
				buttonData: ['粉按钮', '绿按钮', '蓝按钮'],
				show: 'Tab1',
				showData: ['Tab1', 'Tab2', 'Tab3'],
				clickIndex: '0'
			}
		},
		methods: {
			changeTab: function(index){
				this.show = this.showData[index]
				this.changeColor(index)
			},
			changeColor: function(index){
				this.clickIndex = index;
			}
		},
		components: {
			Tab1, Tab2, Tab3
		}
	}
</script>

<style scoped="scoped">
	.buttons {
		display: flex;
		/*height: 30px;*/
		/*margin: 0 auto;*/
		border-bottom: 1px solid #dcdcdc;
		justify-content: space-between;
		padding: 15px 30px;
		/*line-height: 30px;*/
	}
	.buttons span {
		border: 1px solid #DCDCDC;
		line-height: 30px;
		padding: 5px;
	}
	
	.actived {
		background: orange;
		color: white;
	}
	.unActived {
		background: none;
		color: black;
	}
</style>